<template>
	<view v-if="isRender">
		<view class="subsection-box">
			<view :class="selectSubsection == item ? 'item active' : 'item'" @click="handleSelectSubsection(item,index)"
				v-for="(item,index) in list" :key="index">
				{{getStr('starPond.index.' + item)}}
			</view>
		</view>
		<view class="tab-box">
			<view :class="selectTab == item ? 'item active' : 'item'" @click="handleSelectTab(item,index)"
				v-for="(item,index) in tabList" :key="index">
				<!-- {{getStr('starPond.index.' + item)}} -->
				{{getStr(item)}}
			</view>
		</view>

		<view class="list-box" v-if="selectTab == 'buy'">
			<view class="item good-bg1" v-for="(item,index) in goods" @click="()=>handleGoods(item)">
				<!-- <view class="start-box" v-if="index == 1">
					可出售
				</view>
				<view class="start-box" v-if="index != 1">
					<image src="/static/images1/starPond/time.png" style="width: 15rpx; height: 15rpx;margin-right: 6rpx;">
					</image>
					<up-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></up-count-down>
				</view> -->
				<view class="item-info">
					<image src="/static/images1/kapai.png"
						style="width: 146rpx; height: 225rpx;border-radius: 12rpx;margin: 0 auto;"></image>
					<!-- <view class="title">{{item.title}}</view> -->
					<view class="title">处女座</view>
					<!-- <view class="des">{{item.nickName}}</view> -->
					<view class="hour-box">
						<!-- {{getStr('starPond.index.profitPerHour')}} -->
						<text>{{item.price}}</text>
						<image src="/static/images1/star-bb.png" style="width: 18rpx; height: 18rpx;margin: 0 6rpx 0 2rpx;"></image>
					</view>
					<view class="bottom-box">
						<view>
							<text>{{getStr('trade.issuePrice')}}:{{item.price}}</text>
							<image src="/static/images1/star-bb.png" style="width: 18rpx; height: 18rpx;margin: 0 6rpx 0 2rpx;">
							</image>
						</view>
						<view>
							<text>{{getStr('trade.lastPrice')}}:{{item.price}}</text>
							<image src="/static/images1/star-bb.png" style="width: 18rpx; height: 18rpx;margin: 0 6rpx 0 2rpx;">
							</image>
						</view>
					</view>
				</view>
				<view class="divider-box"><up-divider text="" lineColor="#FFFFFF50"></up-divider></view>
				<view class="item-buttom">
					<text>1次</text>
					<text>+3.8%</text>
				</view>
			</view>

		</view>
		
		<view class="list-box" v-if="selectTab == 'sell'">
			<view class="item good-bg1" v-for="(item,index) in goods" @click="()=>handleGoods(item)">
				<view class="item-info">
					<image src="/static/images1/kapai-w.png"
						style="width: 146rpx; height: 225rpx;border-radius: 12rpx;margin: 0 auto;"></image>
					<view class="title">{{item.nickName}}</view>
					<view class="hour-box" style="margin-bottom: 28rpx;">
						<text>{{item.price}}</text>
						<image src="/static/images1/star-bb.png" style="width: 18rpx; height: 18rpx;margin: 0 6rpx 0 2rpx;"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="popup-box">
			<up-popup :show="popupShow" @close="popupShow = false">
				<view class="popup">
					<view class="close-box" @click="popupShow = false">
						<image src="/static/images1/close-icon.png" style="width: 26rpx; height: 26rpx;"></image>
					</view>
					<view class="image-box" v-if="selectTab == 'buy'">
						<video src="/static/images1/kapai-video.mp4" style="width: 520rpx; height: 520rpx;" autoplay="true"
							loop></video>
						<!-- <image :src="selectGoods.img" style="width: 340rpx; height: 240rpx;border-radius: 12rpx;"></image> -->
					</view>
					
					<view class="image-box" v-if="selectTab == 'sell'">
						<video src="/static/images1/kapai-video-w.mp4" style="width: 520rpx; height: 520rpx;" autoplay="true"
							loop></video>
						<!-- <image :src="selectGoods.img" style="width: 340rpx; height: 240rpx;border-radius: 12rpx;"></image> -->
					</view>

					<view v-if="selectTab == 'buy'">
						<view class="title-box">{{selectGoodsInfo.zhName}}</view>
						<view class="des-box">{{getStr('release')}}：{{selectGoodsInfo.nickName}} {{selectGoodsInfo.createTime}}
						</view>
						<view class="des-box">{{getStr('trade.issuePrice')}}：{{selectGoodsInfo.releasePrice}}
							<image src="/static/images1/star-bb.png" style="width: 22rpx; height: 22rpx;margin: 0 6rpx 0 2rpx;">
							</image>
						</view>
						<view class="des-box">
							1{{getStr('order')}}
						</view>
						<view class="des-box">
							+{{selectGoodsInfo.cardGrowthRate * 100}}%
						</view>
						<!-- <view class="price-box1">
							发行价：99
							<image src="/static/images1/star-bb.png" style="width: 22rpx; height: 22rpx;margin: 0 6rpx 0 2rpx;"></image>
						</view> -->
						<view class="price-box2">
							<!-- <image :src="zsImg" style="width: 42rpx; height: 42rpx;margin-right: 14rpx;"></image> -->
							{{selectGoodsInfo.currentPrice}}
							<image src="/static/images1/star-bb.png" style="width: 36rpx; height: 36rpx;margin: 0 6rpx 0 2rpx;">
							</image>
						</view>
					</view>
					<view v-if="selectTab == 'sell'">
						<view class="des-box">{{getStr('buyer')}}：{{selectGoodsInfo.nickName}}</view>
						<view class="des-box">{{getStr('trade.purchasePriceRange')}}：{{selectGoodsInfo.currentPriceLimit}}</view>
						<view class="des-box">{{getStr('trade.time')}}：{{selectGoodsInfo.createTime}}</view>
					</view>

					<view class="btn-box" v-if="selectTab == 'buy'">
						<u-button customStyle="border-radius:12rpx;height:100rpx;font-weight: 500;font-size: 32px;color: #FFFFFF;"
							:text="getStr('buy')" color="#262930" @click="modalShow = true"></u-button>
					</view>
					<view class="btn-box" v-if="selectTab == 'sell'">
						<u-button customStyle="border-radius:12rpx;height:100rpx;font-weight: 500;font-size: 32px;color: #FFFFFF;"
							:text="getStr('sell')" color="#262930" @click="cardModelShow = true"></u-button>
					</view>
				</view>
			</up-popup>
		</view>
		<confirmModal :show="modalShow" :title="getStr('prompt')" :describe="getStr('NeedSpendStar') + selectGoods.price"
			@close="modalShow = false" @confirm="confirmBuy"></confirmModal>

		<cardModel :show="cardModelShow" :data="{adId: selectGoods.id,...selectGoodsInfo}" :title="getStr('prompt')" @close="()=>{cardModelShow = false;removeStore()}" @confirm="confirmCard"></cardModel>

		<tabbarVue :current="3"></tabbarVue>
	</view>
</template>

<script setup>
	import tabbarVue from '@/components/tabbar/index.vue'
	import defaultImg from '@/static/default-img.png'
	import confirmModal from '@/components/confirmModal/index.vue'
	import cardModel from './components/cardModel.vue'
	import zsImg from '@/static/zs.png'
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getTradeList,
		getBuyInfo,
		adBuy,
		cancelMyAd
	} from '@/common/api/common.js'
	const list = ref(['games', 'minigames', 'mineCards'])
	// const tabList = ref(['myCards', 'newCards', 'missedOpportunities'])
	const tabList = ref(['buy', 'sell'])
	const selectSubsection = ref('games')
	const selectTab = ref('buy')

	const popupShow = ref(false)
	const selectGoods = ref({})
	const selectGoodsInfo = ref({})
	const isRender = ref(true)

	const totalPages = ref(1)
	const page = ref(1)

	const goods = ref([])

	const modalShow = ref(false)
	const cardModelShow = ref(false)

	const handleSelectSubsection = (data, index) => {
		selectSubsection.value = data
		totalPages.value = 1
		page.value = 1
		getTradeListFn()
	}
	const handleSelectTab = (data, index) => {
		selectTab.value = data
		totalPages.value = 1
		page.value = 1
		getTradeListFn()
	}

	const getTradeListFn = async () => {
		const res = await getTradeList({
			adType: selectTab.value,
			cardTypeId: list.value.findIndex(item => item == selectSubsection.value) + 1,
			page: page.value
		})
		if (res.code == 200) {
			goods.value = res.data.adList.map(item => {
				return {
					...item,
					img: '/static/images1/img1.png',
					title: 'Beach Roller Hamster',
					des: '砂浜口-ラ-(Sunahama Rōrā)',
				}
			})
			totalPages.value = res.data.totalPages
		}
	}


	const handleGoods = data => {
		selectGoods.value = data
		popupShow.value = true
		getBuyInfoFn()
	}

	const getBuyInfoFn = async () => {
		const res = await getBuyInfo({
			adId: selectGoods.value.id
		})
		if (res.code == 200) {
			selectGoodsInfo.value = res.data
		}
	}

	const confirmBuy = async () => {
		const res = await adBuy({
			telegramId: uni.getStorageSync('telegramId'),
			adId: selectGoods.value.id
		})
		if (res.code == 200) {
			popupShow.value = false
			uni.navigateTo({
				url:'/pages/my/myBag/index'
			});
			uni.$u.toats(getStr('toast.successfully'));
		} else {
			uni.$u.toast(res.message)
		}
	}
	
	const confirmCard = async () =>{
		const res = await cancelMyAd({
			telegramId: uni.getStorageSync('telegramId'),
			adId: selectGoods.value.id
		})
		if (res.code == 200) {
			uni.$u.toats(getStr('toast.successfully'))
		} else {
			uni.$u.toast(res.message)
		}
		
		removeStore()
	}

	const goPage = (url) => {
		uni.navigateTo({
			url: url
		})
	}

	const getStr = (key) => {
		return uni.$t(key)
	}
	const setIsRender = () => {
		isRender.value = false
		setTimeout(() => {
			isRender.value = true
		}, 50)
	}
	const removeStore = () =>{
		uni.removeStorageSync('tradeCard')
	}
	onLoad(() => {
		getTradeListFn()
	})
	onShow(() => {
		setIsRender()
		getTradeListFn()
		if(uni.getStorageSync('tradeCard')){
			selectTab.value = 'sell'
			const tradeCard = uni.getStorageSync('tradeCard')
			handleGoods({id:tradeCard.cardInfo.adId})
			cardModelShow.value = false
			setTimeout(()=>{
				cardModelShow.value = true
			},50)
			
		}
	})
	onReachBottom(() => {
		if (pages.value + 1 <= totalPages.value) {
			pages.value = pages.value + 1
			getTradeListFn()
		}
	})
</script>
<style>
	page {
		background: #1C1E23;
	}
</style>
<style lang="scss" scoped>
	.subsection-box {
		width: calc(100vw - 28rpx - 28rpx);
		height: 84rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #272A2F;
		border-radius: 12rpx;
		padding: 8rpx;
		box-sizing: border-box;
		margin: 28rpx auto 0;

		.item {
			width: 33.33%;
			height: calc(84rpx - 8rpx - 8rpx);
			color: #ffffff;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.active {
			background: #1C1F24;
		}
	}

	.tab-box {
		width: calc(100vw - 28rpx - 28rpx);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 22rpx auto 0;
		border-bottom: 1px solid #272A2F;

		.item {
			padding: 20rpx 0;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 22rpx;
			margin-right: 30rpx;
			border-bottom: 1px solid #000000;
		}

		.active {
			color: #DCBB4F;
			border-bottom: 1px solid #DCBB4F;
		}
	}

	.list-box {
		padding: 32rpx 28rpx 100rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;


		.item:nth-child(2n) {
			background: linear-gradient(0deg, #453337 0%, #F0B4C1 100%);
		}

		.item:nth-child(2n-1) {
			background: linear-gradient(0deg, #25251D 0%, #F7F1CD 100%);
		}

		.item:nth-child(1) {
			background: linear-gradient(0deg, #13222D 0%, #5599C0 100%);
		}

		.item:nth-child(2) {
			background: linear-gradient(0deg, #271F2A 0%, #D4B6EB 100%);
		}

		.item:nth-child(3) {
			background: linear-gradient(0deg, #453337 0%, #F0B4C1 100%);
		}

		.item:nth-child(4) {
			background: linear-gradient(0deg, #25251D 0%, #F7F1CD 100%);
		}

		.item {
			width: calc(50% - 9rpx);
			// height: 398rpx;
			box-sizing: border-box;
			padding-top: 72rpx;
			background: linear-gradient(0deg, #25251D 0%, #F7F1CD 100%);
			border-radius: 32rpx;
			margin-bottom: 18rpx;
			position: relative;

			.start-box {
				padding: 0 20rpx;
				height: 42rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: absolute;
				right: 0;
				top: 0;
				background: #00000080;
				border-top-right-radius: 32rpx;
				border-bottom-left-radius: 32rpx;
				color: #ffffff;
				font-size: 16rpx;

				::v-deep .u-count-down__text {
					color: #ffffff;
					font-size: 16rpx;
					line-height: 28px;
				}
			}

			.item-info {
				display: flex;
				flex-direction: column;
				align-content: center;

				.title {
					font-weight: 800;
					font-size: 20rpx;
					line-height: 20rpx;
					color: #FFFFFF;
					margin-top: 12rpx;
					text-align: center;
				}

				.des {
					font-weight: 500;
					font-size: 16rpx;
					line-height: 16rpx;
					color: #FFFFFF;
					opacity: 0.5;
					margin-top: 12rpx;
					text-align: center;
				}

				.hour-box {
					font-weight: 500;
					font-size: 14rpx;
					line-height: 14rpx;
					color: #FFFFFF80;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 12rpx;

					text {
						// font-size: 20rpx;
						font-weight: bold;
						font-size: 24rpx;
						color: #FFFFFF;
						margin-right: 4rpx;
					}
				}

				.bottom-box {
					width: calc(100% - 28rpx - 28rpx);
					margin: 20rpx auto 0;
					display: flex;
					justify-content: space-between;
					align-items: center;

					view {
						font-size: 14rpx;
						color: #FFFFFF80;
						display: flex;
						justify-content: flex-start;
						align-items: center;
					}

					text {
						margin-right: 2rpx;
					}
				}

			}

			.divider-box {
				width: calc(100% - 28rpx - 28rpx);
				margin: 10rpx auto 10rpx;

				::v-deep .u-divider {
					margin: 0;
				}
			}

			.item-buttom {
				width: calc(100% - 28rpx - 28rpx);
				margin: 0 auto 30rpx;
				line-height: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: bold;
				font-size: 18rpx;
				color: #FFFFFF;
			}

		}
	}

	.popup-box {

		::v-deep .u-popup__content {
			// height: calc(100vh - 138rpx - 42rpx - 64rpx);
			background: #000000;
			padding-bottom: 42rpx;
			border-top-left-radius: 60rpx;
			border-top-right-radius: 60rpx;
			box-shadow: 0 0 20px rgba(218, 168, 183, 0.6),
				/* 主外发光 */
				0 0 20px rgba(218, 168, 183, 0.2),
				/* 次外发光 */
				0 0 20px rgba(218, 168, 183, 0.1);
			/* 远离中心的外发光 */
			border-top: 1px solid #DAA8B7;
		}

		.close-box {
			width: 26rpx;
			height: 26rpx;
			position: absolute;
			right: 42rpx;
			top: 42rpx;
		}

		.image-box {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 42rpx;
		}

		.title-box {
			font-weight: bold;
			font-size: 48rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 30rpx;
			line-height: 48rpx;
		}

		.des-box {
			width: calc(100% - 28rpx - 28rpx);
			margin: 30rpx auto 0;
			font-weight: 500;
			font-size: 24rpx;
			line-height: 26rpx;
			color: #FFFFFF;
			text-align: center;
		}

		.price-box1 {
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0.5;
			margin-top: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 20rpx;
		}

		.price-box2 {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
		}

		.btn-box {
			width: calc(100% - 28rpx - 28rpx);
			margin: 48rpx auto 0;
		}
	}
</style>